import type {
  Preset,
} from 'unocss'
// https://www.npmjs.com/package/@uni-helper/unocss-preset-uni
import { presetUni } from '@uni-helper/unocss-preset-uni'

// @see https://unocss.dev/presets/legacy-compat
import { presetLegacyCompat } from '@unocss/preset-legacy-compat'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUni({
      attributify: false,
    }),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    // 支持css class属性化
    presetAttributify(),
    // TODO: check 是否会有别的影响
    // 处理低端安卓机的样式问题
    // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
    // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
    // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
    presetLegacyCompat({
      commaStyleColorFunction: true,
    }) as Preset,
  ],
  transformers: [
    // 启用指令功能：主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
    transformerVariantGroup(),
  ],
  shortcuts: [
    {
      center: 'flex justify-center items-center',
    },
  ],
  // 小说分享App常用图标
  safelist: [
    'i-carbon-code',
    'i-carbon-home',
    'i-carbon-user',
    // 导航相关
    'i-carbon-search',
    'i-carbon-compass',
    'i-carbon-book',
    'i-carbon-user-avatar',
    'i-carbon-list',
    // 操作相关
    'i-carbon-chevron-left',
    'i-carbon-chevron-right',
    'i-carbon-close',
    'i-carbon-overflow-menu-horizontal',
    'i-carbon-download',
    'i-carbon-share',
    'i-carbon-thumb-up',
    'i-carbon-chat',
    'i-carbon-time',
    'i-carbon-view',
    // 状态相关
    'i-carbon-loading',
    'i-carbon-checkmark-filled',
    'i-carbon-play-filled',
    'i-carbon-locked',
    'i-carbon-warning',
    'i-carbon-wifi-off',
    // 内容相关
    'i-carbon-document',
    'i-carbon-document-blank',
    'i-carbon-star',
    'i-carbon-filter',
    'i-carbon-trash-can',
    'i-carbon-arrow-up-left',
    // 其他
    'i-carbon-signal',
    'i-carbon-battery-full',
    'i-carbon-edit',
    'i-carbon-settings',
    'i-carbon-logout',
    'i-carbon-heart',
    'i-carbon-bookmark',
    // 评分星星颜色
    'text-yellow-400',
    'text-gray-400',
  ],
  rules: [
    [
      'p-safe',
      {
        padding:
          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],
  theme: {
    colors: {
      /** 主题色，用法如: text-primary */
      'primary': 'var(--wot-color-theme,#0957DE)',
      // 小说分享App主题色
      'novel-primary': 'var(--primary-color,#ff6b35)',
      'novel-secondary': 'var(--secondary-color,#f7931e)',
      'bg-dark': 'var(--background-dark,#1a1a1a)',
      'bg-medium': 'var(--background-medium,#2d2d2d)',
      'bg-light': 'var(--background-light,#404040)',
      'text-primary': 'var(--text-primary,#ffffff)',
      'text-secondary': 'var(--text-secondary,#b3b3b3)',
      'text-muted': 'var(--text-muted,#808080)',
      'border-custom': 'var(--border-color,#404040)',
    },
    fontSize: {
      /** 提供更小号的字体，用法如：text-2xs */
      '2xs': ['20rpx', '28rpx'],
      '3xs': ['18rpx', '26rpx'],
    },
    spacing: {
      xs: 'var(--spacing-xs,8rpx)',
      sm: 'var(--spacing-sm,16rpx)',
      md: 'var(--spacing-md,32rpx)',
      lg: 'var(--spacing-lg,48rpx)',
      xl: 'var(--spacing-xl,64rpx)',
    },
    borderRadius: {
      'custom': 'var(--border-radius,24rpx)',
      'custom-sm': 'var(--border-radius-sm,16rpx)',
      'custom-lg': 'var(--border-radius-lg,32rpx)',
    },
  },
})
